<template>
  <div class="home">
    <HomeForm @input="baseInfoChange"></HomeForm>
    <MyTable v-model="selectData" :data="tableData"></MyTable>
    <div class="checkArea">
      <el-button type="primary" @click="checkData">点击判断</el-button>
      <p>所选择表格所组成的图形是：<span style="color:red">{{ tipMess }}</span></p>
    </div>
  </div>
</template>

<script>
import HomeForm from "./components/HomeForm";
import MyTable from "./components/MyTable";
export default {
  name: "Home",
  components: {
    MyTable,
    HomeForm
  },
  data() {
    return {
      baseInfo: {
        row: 0,
        column: 0
      },
      selectData: [],
      isRegular: null
    };
  },
  computed: {
    tableData() {
      const result = [];
      const { row, column } = this.baseInfo;
      const rowArr = [...new Array(row)];
      const columnArr = [...new Array(column)];

      rowArr.forEach((rowNum, rowIndex) => {
        const item = {};
        columnArr.forEach((columnNum, columnIndex) => {
          item[columnIndex] = `${rowIndex},${columnIndex}`;
        });
        result.push(item);
      });
      //console.log('result==',result);
      return result;
    },
    tipMess() {
      switch (this.isRegular) {
        case true:
          return "规则的";
        case false:
          return "不规则的";

        default:
          return "";
      }
    }
  },
  methods: {
    baseInfoChange(val) {
      this.baseInfo.row = val.row;
      this.baseInfo.column = val.column;
    },
    checkData() {
      const selectCellArr = [];

      this.selectData.forEach((row, rowIndex) => {
        
        Object.keys(row).forEach(key => {
          if (row[key]) {
            selectCellArr.push([rowIndex, key]);
          }
        });
        console.log('selectCellArr',selectCellArr);
        
      });

      if (selectCellArr.length) {
        let minRowIndex = null;
        let maxRowIndex = null;
        let minColumnIndex = null;
        let maxColumnIndex = null;

        selectCellArr.forEach(item => {
          const [rowIndex, columnIndex] = item;
          if (minRowIndex === null || rowIndex < minRowIndex) {
            minRowIndex = rowIndex;
          }
          if (maxRowIndex === null || rowIndex > maxRowIndex) {
            maxRowIndex = rowIndex;
          }
          if (minColumnIndex === null || columnIndex < minColumnIndex) {
            minColumnIndex = columnIndex;
          }
          if (maxColumnIndex === null || columnIndex > maxColumnIndex) {
            maxColumnIndex = columnIndex;
          }
        });

        const rowLength = maxRowIndex - minRowIndex + 1;
        const columnLength = maxColumnIndex - minColumnIndex + 1;

        this.isRegular = rowLength * columnLength === selectCellArr.length;
      }
    }
  }
};
</script>

<style scoped>
.home{
  margin-top: 30px;;
}
.checkArea {
  margin-top: 20px;
}
</style>
